import React, { useState, useEffect } from "react";
import ProForm, { ProFormDatePicker } from "@ant-design/pro-form";
import MusicAPI from '@/services/ant-design-pro/music';
import { message, Space, Image, Button } from 'antd'
import { ArrowRightOutlined } from '@ant-design/icons';

import UploadImg from '@/components/UploadImg'
import m_config from '@/config/config'
import No_head from '@/assets/image/no_head.jpg'
import Upload from './UploadMusic/uploadMuisc'
const { addMusic, cancelUpload } = MusicAPI
const Create = (props) => {
    const { visible, isShowModal, actionRef, setUserData } = props;
    const [musicData, setMusicData] = useState(undefined);
    const [imgFile, setImgFile] = useState(undefined);
    const [isUploading, setIsUploading] = useState(false);
    const isCanUpload = (params) => {
        setIsUploading(false);
    }

    const onUploadChange = (params) => {
        if (params.status === true) {
            setIsUploading(true);
        }
        if (params.percent >= 100) {
            console.log("上传完成");
            setMusicData(params.value);
        }
    }

    const setImageFile = (params) => {
        setImgFile(params);
    }


    useEffect(() => {
        if (visible === false && musicData !== undefined) {
            cancelUpload();
            message.warning('您已取消上传');
        }
    }, [visible]);

    /**
     * 添加
     * @param {obj} params 参数
     * @returns 
     */
    const handleSubmit = async (params) => {
        let data = {
            data: params,
            _imgfile: imgFile || null
        };

        if (musicData === undefined) {
            return message.error("还没有添加音乐")
        }
        data._filename = musicData.dirname;
        data.data.music_name = musicData.music_name;

        let result = await addMusic(data);
        if (result.status == 'ok') {
            await setUserData();
            actionRef.current.reload();
            message.success("添加成功");
            setMusicData(undefined);
            isShowModal(false);
        } else {
            message.error('添加失败：' + result.data.message);
            console.log(result.data.error);
        }
    }
    return (
        <>
            <ProForm
                onFinish={(values) => handleSubmit(values)}
                submitter={{
                    // 配置按钮文本
                    searchConfig: {
                        resetText: '重置',
                        submitText: '提交',
                    },
                    render: (props, doms) => {
                        return [
                            <Button key="rest" disabled={isUploading ? true : ""} onClick={() => props.form?.resetFields()}>
                                重置
                            </Button>,
                            <Button type="primary" disabled={isUploading ? true : ""} key="submit" onClick={() => props.form?.submit?.()}>
                                提交
                            </Button>,
                        ];
                    },
                }}
            >
                <Space size={12}>
                    <Image
                        width={150}
                        src={No_head}
                        onError={(e) => {
                            e.target.src = No_head;
                        }}
                    />
                    <ArrowRightOutlined />
                    <UploadImg setImgFile={(values) => setImageFile(values)} />
                </Space>
                <div >
                    <Upload isCanUpload={isCanUpload} onUploadChange={onUploadChange} />
                </div>
                <ProFormDatePicker width="md" name="music_issue_time" label="发行时间" />
            </ProForm>
        </>
    );
}

export default Create;